<template>
    <var-dialog
        title="头像裁剪"
        v-model:show="dialogVisible"
        dialog-class="m-avatar-cropper-dialog"
        width="320px"
        :confirmButton="false"
        :cancelButton="false"
    >
        <VuePictureCropper
            :boxStyle="{
                width: '100%',
                height: '300px',
                backgroundColor: '#f8f8f8',
                margin: 'auto',
            }"
            :img="image"
            :options="{
                viewMode: 1,
                dragMode: 'move',
                aspectRatio: 1,
                cropBoxResizable: true,
            }"
            :presetMode="{
                mode: 'fixedSize',
                width: 300,
                height: 300,
            }"
        />

        <div class="dialog-footer">
            <var-button size="small" @click="onCancel">关闭</var-button>
            <var-button
                :loading="isLoading"
                type="primary"
                size="small"
                @click="onConfirm"
            >
                确认
            </var-button>
        </div>
    </var-dialog>
</template>
<script setup>
import VuePictureCropper from "vue-picture-cropper";
import { useContent } from ".";

const { dialogVisible, image, fileName, isLoading, onCancel, onConfirm } =
    useContent();

defineExpose({
    show(file, name) {
        image.value = file;
        fileName.value = name;
        dialogVisible.value = true;
    },
});
</script>
<style lang="scss">
.m-avatar-cropper-dialog {
    .dialog-footer {
        display: flex;
        justify-content: center;
        margin-top: 15px;

        .var-button {
            margin-right: 40px;

            &:last-of-type {
                margin-right: 0;
            }
        }
    }
}
</style>
